import React from 'react';
import dayjs from 'dayjs';
import { useFormDialog } from '@/hooks/useForm';
import '@/views/attendance/classInfo/index.less';
import ClassDetail from '@/views/attendance/classInfo/detail/ClassDetail';
import { arrange, removeClassInfo } from '@/views/attendance/classInfo/api';
import { App, Button, Card, DatePicker, message, Space, TimePicker, Tooltip, Typography } from 'antd';
import ClassInfoForm from '@/views/attendance/classInfo/dialog/ClassInfoForm';
import { DeleteOutlined, EditOutlined, EyeOutlined, LayoutOutlined } from '@ant-design/icons';
import FormModal from '@/component/FormModal';

const { Text } = Typography;

const Detail = ({ props = {} }) => {
    const { modal } = App.useApp();

    const { date, events, selectedEvent, setSelectedEvent, onCallback } = props;

    const classInfoForm = useFormDialog({
        width: 480,
        save: arrange,
        callback: onCallback
    });

    const onTempFormCallback = (model) => {
        console.log('临时排班: ', model);
        // TODO 因表结构问题，此处暂时不做修改功能，后续补充
        // tempForm.onSubmit(model);
    }

    const tempForm = useFormDialog({
        title: '临时排班',
        width: 450,
        save: arrange,
        callback: onTempFormCallback,
        items: [
            {
                label: '名称',
                name: 'name',
                rules: [{ required: true, message: '请输入名称' }],
            },
            {
                label: '颜色',
                name: 'color',
            },
            {
                label: '日期',
                name: 'workDate',
                rules: [{ required: true, message: '请选择日期' }],
                render: <DatePicker.RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
            },
            {
                label: '时间',
                name: 'workTime',
                rules: [{ required: true, message: '请选择时间' }],
                render: <TimePicker.RangePicker changeOnScroll needConfirm={false} format="HH:mm" style={{ width: '100%' }} />,
            },
        ],
    });

    // 临时排班
    const temporaryClassHandler = () => {
        let work_date = dayjs(date, 'YYYY-MM-DD');
        let datetime = dayjs();

        let model = {
            workDate: [work_date, work_date],
            workTime: [datetime, datetime.add(30, 'm')],
        }
        classInfoForm.isOpenDialog(model);
    }

    /**
     * 编辑临时排班
     */
    const onEditTemporaryHandler = (model) => {
        let work_date = dayjs(model.date, 'YYYY-MM-DD');
        let entity = {
            id: model.id,
            workDate: [work_date, work_date],
            workTime: [dayjs(model.beginTime, 'HH:mm'), dayjs(model.finishTime, 'HH:mm')],
            color: model.borderColor,
            name: model.title,
        };
        tempForm.isOpenDialog(entity);
    }

    const onRemoveClassInfoHandler = (model) => {
        modal.confirm({
            title: '确认删除',
            content: '确定要删除这条数据吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                removeClassInfo(model.id).then(resp => {
                    if (resp?.data) {
                        message.success('删除成功');
                        // setEvents(events.filter(each => each.id != model.id));
                        onCallback(date);
                    } else {
                        message.error(resp?.message || '删除失败');
                    }
                });
            }
        });
    }

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            flex: '1',
            border: '1px solid #f0f0f0',
            borderRadius: 8,
            padding: '10px 16px 16px',
            minWidth: '320px',
            backgroundColor: '#fff',
            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)'
        }}>
            <Space style={{
                display: 'flex',
                justifyContent: 'space-between',
                width: '100%',
                marginBottom: 20,
                paddingBottom: 8,
                borderBottom: '1px solid #f0f0f0',
                alignItems: 'center'
            }}>
                <Text strong style={{ fontSize: '15px', color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500 }}>
                    {date}
                </Text>
                <Space size="small">
                    <Button
                        type="link"
                        size="small"
                        style={{
                            color: '#1890ff',
                            padding: '0 6px',
                            fontSize: '14px',
                        }}
                        onClick={temporaryClassHandler}
                    >
                        排班
                    </Button>
                    {/* <Tooltip title='员工视图'>
                        <Button
                            type="link"
                            size="small"
                            icon={<LayoutOutlined />}
                            style={{
                                color: '#1890ff',
                                padding: '0 6px',
                                fontSize: '14px',
                            }}
                        >
                        </Button>
                    </Tooltip> */}
                </Space>
            </Space>
            <ClassInfoForm props={classInfoForm} />
            <FormModal props={tempForm} />

            {selectedEvent ? (
                <ClassDetail props={props} />
            ) : (events.length > 0 ? (
                <div style={{
                    display: 'grid',
                    gap: '12px',
                    overflowY: 'auto',
                    paddingRight: 4,
                    maxHeight: 'calc(100vh - 180px)'
                }}>
                    {events.map((event, index) => (
                        <Card
                            key={index}
                            size="small"
                            hoverable
                            className='hoverCard'
                            onClick={() => setSelectedEvent(event)}
                            title={
                                <Text strong>
                                    {event.title}
                                </Text>
                            }
                            style={{
                                borderLeft: `3px solid ${event.color || '#1890ff'}`,
                                borderRadius: '6px',
                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
                                marginBottom: 8
                            }}
                            extra={
                                <Space>
                                    <Tooltip title='查看详情'>
                                        <Button
                                            size='small'
                                            type="text"
                                            icon={<EyeOutlined style={{ color: '#1890ff' }} />}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setSelectedEvent(event);
                                            }}
                                        />
                                    </Tooltip>
                                    {/* <Tooltip title='编辑'>
                                        <Button
                                            size='small'
                                            type="text"
                                            icon={<EditOutlined style={{ color: '#1890ff' }} />}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                onEditTemporaryHandler(event);
                                            }}
                                        />
                                    </Tooltip> */}
                                    <Tooltip title='删除'>
                                        <Button
                                            size='small'
                                            type="text"
                                            icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                onRemoveClassInfoHandler(event);
                                            }}
                                        />
                                    </Tooltip>
                                </Space>
                            }
                        >
                            <div style={{
                                lineHeight: '1.5',
                                fontSize: '13px',
                                color: 'rgba(0, 0, 0, 0.65)'
                            }}>
                                <p style={{ marginBottom: 6 }}>
                                    <Text strong style={{ color: 'rgba(0, 0, 0, 0.85)' }}>时 &nbsp; 间：</Text>
                                    {dayjs(event.start).format('YYYY-MM-DD HH:mm')}
                                    {event.end && ` ~ ${dayjs(event.end).format('HH:mm')}`}
                                </p>
                                <p style={{ marginBottom: 6 }}>
                                    <Text strong style={{ color: 'rgba(0, 0, 0, 0.85)' }}>员工数：</Text>
                                    {event.staffs || 0}
                                </p>
                                <p style={{ marginBottom: 0 }}>
                                    <Text strong style={{ color: 'rgba(0, 0, 0, 0.85)' }}>备 &nbsp; 注：</Text>
                                    {event.remark}
                                </p>
                            </div>
                        </Card>
                    ))}
                </div>
            ) : (
                <div
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#999',
                        flexDirection: 'column',

                    }}
                >
                    <div style={{ fontSize: '48px', marginBottom: '10px', cursor: 'pointer' }} onClick={() => temporaryClassHandler()}>📅</div>
                    <p>暂无事件数据</p>
                </div>
            ))}

        </div >
    );
};

export default Detail;